<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

      

       <script>  
                
              let vndoe={
                  tag:"DIV",
                  attrs:{
                      id:"app"  
                  },
                  children:[
                      {
                        tag:"SPAN",
                        attrs:{
                            class:"app_left"  
                        },
                      },
                      {
                        tag:"SPAN",
                        attrs:{
                            class:"app_right"  
                        },
                      },

                  ]
              }

              function render(vndoe){
                  if(typeof vndoe=='number'){
                     console.log(vndoe)
                      vndoe=String(vndoe) 
                  }
                  if(typeof vndoe=='string'){
                     console.log(vndoe)
                     return document.createTextNode(vndoe) 
                  }
                  const element=document.createElement(vndoe.tag)
                  if( vndoe.attrs){
                     Object.keys( vndoe.attrs).forEach((key,attrkey)=>{
                        // console.log(key)
                        // console.log(attrkey)
                        // console.log(vndoe.attrs[key])
                        element.setAttribute(key, vndoe.attrs[key])
                     })
                  }
                  if( vndoe.children){
                      vndoe.children.forEach((childNode)=>{
                        element.appendChild( render (childNode))
                     })
                  }
                  return element

              }
             let aaa=   render(vndoe)
             console.log(aaa)

            //  let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
            //  let bbb=  Object.keys(person) // ["name", "age", "address","getName"]
            //  console.log(bbb)

            





     

       </script>

</body>
</html>